<template>
  <div class="dashboard-editor-container">
    <el-row>
      <el-col :span="24">
        <el-card shadow="always" class="select-card">
          <SearchKeyCo
            :form-key="tableHead"
            :search-data="searchForm"
            :time-format="'yyyy-MM-dd HH:mm:ss'"
            @search-submit="query"
            @reset-search-form="resetSearch"
            @clearValue="clear"
          />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { SearchKeyCo } from "/@/components/CommonCo";
import { onMounted, ref } from "vue";
import CommonApi from "/@/api/CommonApi";

const commonApi: CommonApi = new CommonApi();
const searchForm = ref({});
const tableHead = ref({});
const tableAlias = "atmo";
// 获取表头及字段信息
const acquireTableInfo = async () => {
  await commonApi.getTableInfo(tableAlias).then(ref => {
    if (ref.data.code === 0) {
      tableHead.value = ref.data.data.fieldList;
    }
  });
};
const query = () => {
  console.log("query");
};
const resetSearch = () => {
  searchForm.value = {};
};

const clear = (value: any) => {
  console.log(value);
};
onMounted(() => {
  acquireTableInfo();
});
// import DataModule from "@/common/data/DataModule";
// import { Message } from "element-ui";
// import AtmoApi from "@/api/api/atmosphere/AtmoApi";
//
//  @Options({
//   name: "atmo",
//   components: {
//     searchKeyCo,
//     formCo,
//     tableHeadCo,
//     batchUpdateForm,
//     editTableCo
//   }
// })
// export default class extends mixins(Common) {
//   // 表格中 '操作'列的宽度
//   private operationWidth = 150;
//   // 买电API
//   private atmoApi: AtmoApi = new AtmoApi();
//   // 状态
//   private chargeVisible = false;
//
//   // 表格中对齐方式，center/left/right
//   private cellAlign = "center";
//
//   private addForm = {};
//
//   async created() {
//     // 设置默认排序
//     this.sort = "ATMO_DATE";
//     this.order = "DESC";
//     // 设置表别名
//     this.tableAlias = "atmo";
//     // 获取表头及表单信息
//     await this.acquireTableInfo();
//     // 获取基表信息格式化下拉框及表格数据
//     await this.getBaseTableInfo();
//     // 获取列表信息
//     this.acquireTable();
//     // 设置默认校验构造
//     this.formRules = {};
//     // 设置默认禁用字段
//     this.disableField = ["ORDER_STATE"];
//   }
//
//   // 可编辑表格select
//   editTableSelectionChange(val: any) {
//     this.editTableSelectList = val;
//   }
//
//   // 表格校验规则
//   tableRules(val: any) {
//     const { rows, rules, callback } = val;
//     let message = "";
//     Object.getOwnPropertyNames(rules).forEach(function (key) {
//       if (key !== "__ob__") {
//         if (StringUtils.isEmpty(rows[key])) {
//           message += rules[key][0].message;
//           message += ",";
//         }
//       }
//     });
//     callback(message);
//   }
//
//   acquireTable() {
//     const param: any = {
//       pageNum: this.currentPage,
//       pageSize: this.pageSize,
//       sortField: this.sort,
//       order: this.order
//     };
//     const data: DataModule = DataModule.formatToModul(
//       this.searchForm,
//       this.tableHead
//     );
//     if (data.hasContent()) {
//       param.data = data.jsons;
//     }
//     const params = Object.assign({}, param);
//     this.getTableList(params);
//   }
//
//   // 获取数据list
//   getTableList(param: any) {
//     this.loading = true;
//     this.atmoApi.list(param).then((ref: Base.IAxiosResponse<any>) => {
//       if (ref.data.code === 0) {
//         this.tableList = ref.data.data.list;
//         this.total = ref.data.data.total;
//       } else {
//         Message.error(ref.data.msg);
//       }
//       this.loading = false;
//     });
//   }
//
//   // 展示新增弹窗方法
//   showAdd() {
//     this.addForm = {
//       cash: 10
//     };
//     this.chargeVisible = true;
//     this.$nextTick(() => {
//       const ref: any = this.$refs.chargeForm;
//       ref.resetFields();
//     });
//   }
//
//   // 展示编辑弹窗接口
//   showEdit(row: any) {
//     this.dialogTitle = "订单详情";
//     this.formType = 2;
//     this.formData = {};
//     this.formData = Object.assign({}, row);
//     this.dialogCreateFormVisible = true;
//   }
//
//   cancelChargeForm() {
//     this.$nextTick(() => {
//       const ref: any = this.$refs.chargeForm;
//       ref.resetFields();
//       ref.clearValidate();
//     });
//     this.addForm = {};
//     this.chargeVisible = false;
//   }
// }
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 30px;
  background-color: #fff;
  position: relative;

  .github-corner {
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
}

.el-select-dropdown__item {
  font-size: 12px;
  height: 30px;
  line-height: 30px;
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.user-query-option {
  padding: 10px;
  background: #fff;
  text-align: center;

  .el-form-item {
    margin-bottom: 1px;
  }
}

.user-button-option {
  padding: 10px;
}

.pagStyle {
  background: #fff;
  text-align: center;
  padding: 10px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
